<template>
	<div class="edit-page-wrap">
		<Head title="基础信息">
			<template #content>
				<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="edit-form-wrap">
					<el-form-item label="姓名" prop="name">
						<el-input v-model.trim="ruleForm.name" placeholder="请输入姓名" maxlength="30" clearable />
					</el-form-item>
					<el-form-item label="手机号" prop="mobile">
						<el-input v-model.trim="ruleForm.mobile" placeholder="请输入手机号" maxlength="11" clearable />
					</el-form-item>
					<el-form-item label="工号" prop="jobNumber">
						<el-input v-model.trim="ruleForm.jobNumber" placeholder="请输入工号" maxlength="30" clearable />
					</el-form-item>
					<el-form-item label="备注" prop="remark">
						<el-input v-model.trim="ruleForm.remark" placeholder="请输入备注" maxlength="30" clearable />
					</el-form-item>
					<el-form-item label="是否启用" prop="izUser">
						<el-radio-group v-model="ruleForm.izUser" v-for="(item, index) in NO_YES" :key="index">
							<el-radio :label="item.value">{{ item.label }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</template>
		</Head>
		<div class="edit-btn-wrap">
			<el-button type="primary" plain @click="back">取消</el-button>
			<el-button type="primary" v-btnAntiShake="onSubmit">保存</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import type { FormInstance, FormRules } from 'element-plus';
	import Head from '@/components/head/index.vue';
	import Combination from '@/components/combination/combination.vue';
	import { addafterSales, updateAfterSales, queryAfterSalesDetail } from '@/service/apis/user';
	import { IS_PHONE_NUM } from '@/utils/verify';
	import {
		NO_YES
	} from '@/utils/dictionaries';

	const router = useRouter();
	const route = useRoute();
	const {
		query: { id, cityCode },
	} = route;
	const ruleFormRef = ref<FormInstance>();
	const comCarRef = ref();

	let ruleForm : any = reactive({
		id: '',
		name: '',
		mobile: '',
		jobNumber: '',
		remark: '',
		izUser: '1',
	});

	const rules = reactive<FormRules>({
		name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
		mobile: [
			{ required: true, message: '请输入手机号', trigger: 'blur' },
			{
				pattern: IS_PHONE_NUM,
				message: '请输入正确的手机号',
				trigger: 'blur',
			},
		],
	});

	const back = () => {
		router.go(-1);
	};

	// 编辑回填数据
	if (id) {
		queryAfterSalesDetail({
			id: id,
		}).then((res : any) => {
			for (const key in ruleForm) {
				if (res[key]) {
					ruleForm[key] = res[key];
				}
			}
			ruleForm.izUser = res.izUser?'1':'0';
		});
	}


	const emit = defineEmits(['clear-cache']);
	const onSubmit = async () => {
		console.log('submit---', ruleForm);
		if (!ruleFormRef.value) return;
		await ruleFormRef.value.validate((valid, fields : any) => {
			if (valid) {
				console.log('submit---', ruleForm);
				if (id) {
					delete ruleForm.password;
					updateAfterSales(ruleForm).then((res : any) => {
						emit('clear-cache');
						back();
					});
				} else {
					addafterSales(ruleForm).then((res : any) => {
						emit('clear-cache');
						back();
					});
				}
			} else {
				for (const key in ruleForm) {
					if (fields[key]) {
						ruleFormRef.value?.scrollToField(key);
						break;
					}
				}
			}
		});
	};
</script>

<style lang="scss" scoped>
	:deep(.combination-wrap .item-wrap) {
		.el-form-item:first-child .el-form-item__content {
			padding-left: 24px !important;
		}
	}
</style>